<template>
  <!-- <el-button @click="logout" type="primary">点我清空缓存(DEBUG)</el-button> -->

  <div class="wrapper">
    <div id="left"></div>
    <div id="right">
      <div class="card-wrapper" :class="dynamicClass">
        <div class="main">
          <h2 class="login-title">Login</h2>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleFormRef"
            label-width="120px">
            <el-form-item label="username" prop="username">
              <el-input v-model="ruleForm.username" @blur="()=>{}"
                >{{ user.username }}}</el-input
              >
            </el-form-item>
            <el-form-item label="password" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                >{{ user.password }}}</el-input
              >
            </el-form-item>

            <div class="btn-wrapper">
              <div class="login-btn">
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="login(ruleFormRef)"
                  >登录
                </el-button>
              </div>
            </div>
            <el-divider style="margin-top:20px;" >
              <template #default>
                <el-link @click="register" style="float: right"
                  >还没账号？去注册</el-link
                >
              </template>
            </el-divider>
          </el-form>
        </div>

        <!-- 注册页 -->
        <div class="main-mirror">
          <h2 class="login-title">Register</h2>
          <el-form
            :model="ruleRegisterForm"
            :rules="rules"
            ref="ruleFormRegisterRef"
            label-width="120px"
          >
            <el-form-item label="username" prop="username">
              <el-input v-model="ruleRegisterForm.username"
                >{{ user.username }}}</el-input
              >
            </el-form-item>
            <el-form-item label="password" prop="password">
              <el-input
                type="password"
                v-model="ruleRegisterForm.password"
                autocomplete="off"
                >{{ user.password }}}</el-input
              >
            </el-form-item>

            <el-form-item label="nickname" prop="nickname">
              <el-input
                type="text"
                v-model="ruleRegisterForm.nickname"
                autocomplete="off"
                >{{ user.nickname }}}</el-input
              >
            </el-form-item>

              <el-form-item label="email" prop="email">
              <el-input
                type="email"
                v-model="ruleRegisterForm.email"
                autocomplete="off"
                >{{ user.email }}}</el-input
              >
            </el-form-item>
          <el-form-item label="code" prop="code">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-input
                  v-model="ruleRegisterForm.code"
                  autocomplete="off">
                    {{ user.code }}}
                  </el-input>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary" @click="getEmailCode(ruleFormRegisterRef)">获取验证码</el-button>
                </el-col>
              </el-row>


            </el-form-item>

            <div class="btn-wrapper">
              <div class="login-btn">
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="userRegister(ruleFormRegisterRef)"
                  >注册
                </el-button>
              </div>
            </div>
            <el-divider style="margin-top: 30px;">
              <template #default>
                <el-link @click="register" style="float: right"
                  >已有账号？去登录</el-link
                >
              
              </template>
            </el-divider>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useTokenStore } from "../store/token";
import { useUserStore } from "../store/user";

import api from "../helper/api";
import { useRouter} from "vue-router";

const tokenStore = useTokenStore();
const userStore = useUserStore();
const router = useRouter();

const user = ref({
  username: "",
  password: "",
});

// 登录页数据
const ruleForm = reactive({
  username: "",
  password: "",
  email:"",
});

// 注册页数据
const ruleRegisterForm = reactive({
  username:"",
  password:"",
  email:"",
  code:""
})

// 元素挂载
const ruleFormRef = ref(null);
const ruleFormRegisterRef = ref(null);


// 是否旋转状态
const isRotated = ref(false);
// 动态样式
const dynamicClass = ref(null);


const getEmailCode = (formEl)=>{
  formEl.validate((valid)=>{
    if(!valid){
      return
    }
    // 验证通过
    api.getEmailCode(ruleRegisterForm.email)
      .then(res=>{
        // console.log(res.data)
      }).error(err=>{
        // console.log(err);
      })
  })
}


const userRegister = (formEl)=>{
  formEl.validate((valid)=>{
    if(!valid){
      return 
    }
    api.userRegister(ruleRegisterForm.username,ruleRegisterForm.password,ruleRegisterForm.nickname,ruleRegisterForm.email,ruleRegisterForm.code)
      .then(res=>{
        // console.log(res.data);
        // 用户注册成功,跳回登录页
        register();
      })
  })
}


const register = () => {
  if (isRotated.value) {
    // 正面时  显示登录 隐藏注册
    dynamicClass.value = "";
  } else {
    dynamicClass.value = "mirror";
  }
  isRotated.value = isRotated.value == true ? false : true;
};

let rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  password: [
    // 密码规则
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 1,
      max: 16,
      message: "密码必须为 6 到 16 个字符且必须包含数字和字母",
      trigger: "blur",
    },
  ],
    email: [
    // 邮箱规则
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      min: 1,
      max: 32,
      trigger: "blur",
    },
    ],
  code: [
    // 验证码规则
    { required: false, message: "请输入验证码", trigger: "blur" },
    {
      min: 6,
      max: 6,
      message:"验证码长度错误"
    }
  ],

});

let login = (formEl) => {
  formEl.validate((valid) => {
    if (!valid) {
      return;
    }
    api.login(ruleForm.username, ruleForm.password).then((res) => {
      tokenStore.setToken(res.data["data"].token);
      userStore.setUser(ruleForm.username,'','');
      router.push("/admin");
        // 尝试旧的main页面
      // router.push("/main");
    });
  });
};

onMounted(() => {});


</script>

<style scoped>
* {
  /* border:1px solid red; */
}

#left {
  flex: 3;
  background-image: url("../assets/login_side.png");
  background-position: center;
  background-repeat: no-repeat;
  background-position: 30px 100px;
}
#right {
  flex: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  flex: 5;
  position: relative;
  height: 100vh;
  background-image: url(../assets/bkg_login.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.main {
  position: relative;
  width: 350px;
  /* height: 500px; */
  background-color: white;
  padding: 30px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  transition: all 0.8s;
  transform: translate(0, 100%);
  z-index:v-bind(isRotated?-1: 100);
  opacity:v-bind(isRotated?0:1);
}
.main-mirror {
  position: relative;
  width: 350px;
  /* height: 500px; */
  background-color: white;
  padding: 30px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  transition: all 0.8s;
  transform: rotate3d(1, 180, 1, 180deg);
  /* transform: translate(0, -50%); */
  z-index:v-bind(isRotated?100: -1);
  opacity:v-bind(isRotated?1:0);
}

.card-wrapper {
  position: relative;
  top: -100px;
  transition: all 0.8s;
}

.mirror {
  transform: rotate3d(0, 180, 0, 180deg);
}
.login-title {
  text-align: center;
  padding: 5px 0px;
  font-size: 30px;
}
.login-btn {
  text-align: center;
  width: 200px;
}
.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hide {
  display: none;
}
</style>
